/* ------------------------------------------------------------------------------
 * Element Styles
 * ------------------------------------------------------------------------------
*/

html {
    background: rgb(239, 239, 239);
}

html,
button,
input,
select,
textarea,
.pure-g [class *="pure-u"] {
    font-family: PingFang SC,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight: 200;
    letter-spacing: 0.01em;
}

body {
    margin: 0;
    min-width: 20em;
    color: var(--sk-body-text-color,rgb(29,29,31));
    line-height: 1.6;
    background: rgb(255, 255, 255);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    color: var(--sk-body-text-color,rgb(29,29,31));
    margin-bottom: 0em;
}

h1 {
    font-size: 1.6em;
}

h2 {
    font-size: 1.4em;
}

h3 {
    font-size: 1.25em;
}

h4 {
    font-size: 1.2em;
}

h5 {
    font-size: 1.1em;
}

h6 {
    font-size: 1.05em;
}

p {
    font-size: 1em;
}

a {
    color: #3b8bba;
    /* block-background-text-normal */
    text-decoration: none;
}

a:visited {
    color: #265778;
    /* block-normal-text-normal */
}

strong {
    color: #383838;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0 0 10px 0;
}

aside {
    background: #1f8dd6;
    /* same color as selected state on site menu */
    padding: 0.3em 1em;
    border-radius: 3px;
    color: #fff;
}

aside a,
aside a:visited {
    color: rgb(169, 226, 255);
}

.mjx-chtml {
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
}


/* --------------------------
 * Layout Styles
 * --------------------------
*/


/* Navigation Push Styles */

#layout {
    position: relative;
    height: 100%;
    padding-left: 0;
}


/* Apply the .box class on the immediate parent of any grid element (pure-u-*) to apply some padding. */

.l-box {
    padding: 1em;
}

.l-wrap {
    margin-left: auto;
    margin-right: auto;
}

.content .l-wrap {
    margin-left: -1em;
    margin-right: -1em;
}


/* --------------------------
 * Header Module Styles
 * --------------------------
*/

.header {
    max-width: 64em;
    margin: auto;
    margin-top: 3em;
    margin-bottom: 1em;
    padding-left: 2em;
    padding-right: 2em;
    text-align: center;
    letter-spacing: 0.05em;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.header h1 {
    font-size: 300%;
    font-weight: 100;
}

.header h2 {
    font-size: 125%;
    font-weight: 100;
    line-height: 1.6;
    color: #444;
}


/* --------------------------
 * Content Module Styles
 * --------------------------
 */

#content-home,
#content-archive,
#content-categorie,
#content-download {
    padding-left: 0em;
    padding-right: 0em;
}

#content-feedback,
#content-about {
    padding-left: 4em;
    padding-right: 4em;
}

#content-articles {
    display: inline-block;
    width: 80%;
    padding-left: 1em;
    padding-right: 1em;
    margin-left: 0px;
}


/* The content div is placed as a wrapper around all the docs */

.content {
    padding-bottom: 6em;
    min-height: 100vh;
    max-width: 64em;
    margin: auto;
    background: rgb(255, 255, 255);
}

.content .content-subhead {
    position: relative;
    margin-top: 2em;
    font-weight: 300;
    color: #444;
}

.content .content-spaced {
    line-height: 1.8;
}

.content .content-quote {
    margin: 1em 0;
    padding: 0em 1em;
    color: #666;
    border-left: 0.25em solid #337ab7;
    background-color: #f0f8ff;
    overflow: auto;
}

.content .content-quote p {
    margin: 0.5em;
}

.content-link {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 20px;
    background: transparent url('/img/link-icon.png') no-repeat center center;
    background-size: 20px 20px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
    .content-link {
        background-image: url('/img/link-icon@2x.png');
    }
}

@media screen and (max-width: 728px) {
    /*当屏幕尺寸小于 728px 时，应用下面的CSS样式*/
    #content-home,
    #content-archive,
    #content-categorie,
    #content-download {
        padding-left: 0em;
        padding-right: 0em;
    }
    #content-feedback,
    #content-about {
        padding-left: 1em;
        padding-right: 1em;
    }
    #content-articles {
        width: 100%;
    }
}


/* --------------------------
 * Code Styles
 * --------------------------
*/

pre,
code {
    font-family: monospace;
}

code {
    white-space: nowrap;
}

pre {
    border-radius: 4px;
    color: #ccc;
    background: #F0F0F0;
}

.content p code {
    font-size: 90%;
}

.pre-wrap {
    padding: 1em;
    border: 1px solid #eee;
    border-left-width: 0;
    border-right-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pre-wrap code {
    white-space: pre;
    word-wrap: normal;
    padding: 0;
    background: none;
}

.code-wrap code {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.MJXc-display::-webkit-scrollbar,
code::-webkit-scrollbar,
pre::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.MJXc-display::-webkit-scrollbar-thumb,
code::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb {
    border-radius: 0;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
}

.MJXc-display::-webkit-scrollbar-track,
code::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track {
    border-radius: 0;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
}


/* --------------------------
 * Footer Module Styles
 * --------------------------
*/

#footer-background {
    background: rgb(239, 239, 239);
}

#footer {
    /* display: inline-block; */
    width: 100%;
    /* font-size: 87.5%; */
    padding: 2em 0em;
    /*background: rgb(239, 239, 239);*/
    max-width: 64em;
    margin: auto;
}

.legal {
    line-height: 1.6;
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.legal-license {
    text-indent: 0em;
    margin-top: 0;
    font-size: 0.8em;
}

.legal-links {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
    font-size: 0.8em;
}

.legal-copyright {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.8em;
}


/* --------------------------
 * Main Navigation Bar Styles
 * --------------------------
*/


/* Add transition to containers so they can push in and out */

#menu,
#menu-background {
    position: fixed;
    width: 100%;
    height: 44px;
    /*top: 0;*/
    left: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

#menu-background {
    position: relative;
    background: #fff;
}

#menu a {
    font-size: 1em;
    color: #e6e6e6;
    border: none;
    white-space: normal;
    padding: 0.625em 1em;
}

#menu .pure-menu ul {
    border: none;
    background: transparent;
    display: block;
}

#menu .block-middle {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 64em;
    height: 44px;
    overflow-y: hidden;
}


/* #menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
    border-top: 1px solid #333;
} */

#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
    background: rgb(90, 90, 90);
}

#menu .pure-menu-heading {
    letter-spacing: 0.1em;
    color: #fff;
}

#menu .pure-menu-heading:hover,
#menu .pure-menu-heading:focus {
    color: #999;
}

#menu .pure-menu-selected {
    background: #1f8dd6;
}

#menu .pure-menu-selected a {
    color: #fff;
}

#menu li.pure-menu-selected a:hover,
#menu li.pure-menu-selected a:focus {
    background: none;
}


/* ---------------------
 * nav Module Styles
 * ---------------------
*/

#nav {
    float: right;
    width: 20%;
}

.navigation {
    position: fixed;
    width: 200px;
    padding-top: 1em;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    max-height: 70vh;
    border-left: 3px solid rgba(0, 0, 0, 0.2);
}

.nav1 {
    padding: 0.1em 0em 0.1em 0.25em;
}

.nav2 {
    padding: 0.1em 0em 0.1em 0.75em;
}

.nav3 {
    padding: 0.1em 0em 0.1em 1.25em;
}

.nav4 {
    padding: 0.1em 0em 0.1em 1.75em;
}

.nav5 {
    padding: 0.1em 0em 0.1em 2.25em;
}

.nav6 {
    padding: 0.1em 0em 0.1em 2.75em;
}

@media screen and (max-width: 728px) {
    /*当屏幕尺寸小于 728px 时，应用下面的CSS样式*/
    body {
        font-size: 12px;
    }

    #nav,
    .navigation {
        display: none;
        width: 0px;
    }

    /* Add transition to containers so they can push in and out */
    #menu a,
    #menu .pure-menu-heading {
        font-size: 125%;
    }
}

/* ---------------------
 * category Module Styles
 * ---------------------
*/

.post-category-link {
    display: block;
    width: 100%;
    height: auto;
    overflow-y: hidden;
    overflow-x: hidden;
}

.post-category-title {
    display: inline-block;
    font-size: 1.1em;
}

.post-category-data {
    display: inline-block;
    float: right;
    width: 7.5em;
    font-size: 1em;
    padding-left: 1em;
}

.post-category {
    padding: 0.2em 1em;
    color: #fff;
    font-size: 0.8em;
}

.post-category-link > .post-category {
    float: right;
}

/* cs languages */

.post-category-c {
    background: rgb(121, 121, 121);
    /* background: rgb(243, 75, 125); */
}

.post-category-cpp {
    /* background: rgb(121, 121, 121); */
    background: rgb(243, 75, 125);
}

.post-category-python {
    background: rgb(250, 210, 50);
}

.post-category-sh {
    background: rgb(255, 68, 26);
}

/* other category */

.post-category-cs {
    background: rgb(31, 141, 214);
}

.post-category-ee {
    background: rgb(129, 86, 167);
}

.post-category-project {
    background: rgb(255, 179, 179);
}

.post-category-math,
.post-category-algorithm {
    background: rgb(120, 179, 62);
}

.post-category-git,
.post-category-machine-learning {
    background: rgb(243, 121, 27);
}

.post-category-web {
    background: rgb(4, 58, 185);
}

.post-category-embedded {
    background: rgb(80, 47, 22);
}

.post-category-raspberry-pi {
    background: rgb(223, 45, 79);
}

.post-category-smart-car {
    background: rgb(107, 155, 184);
}

/* unkonw category */

.post-category-other {
    background: rgb(0, 0, 0);
}


/* ---------------------
 * Smaller Module Styles
 * ---------------------
*/


/* green call to action button class */

.notice {
    background-color: #61B842;
    color: white;
}

.muted {
    color: #ccc;
}